<template>
    <a-modal
            :title="title"
            :width="1200"
            :visible="visible"
            @ok="handleOk"
            @cancel="handleCancel"
            cancelText="关闭">

        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="24">

                    <a-col :span="6">
                        <a-form-item label="账号">
                            <a-input placeholder="请输入账号" v-model="queryParam.username"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col :span="6">
                        <a-form-item label="性别">
                            <a-select v-model="queryParam.sex" placeholder="请选择性别">
                                <a-select-option value="">请选择性别查询</a-select-option>
                                <a-select-option value="1">男性</a-select-option>
                                <a-select-option value="2">女性</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <template v-if="toggleSearchStatus">
                        <a-col :span="6">
                            <a-form-item label="邮箱">
                                <a-input placeholder="请输入邮箱" v-model="queryParam.email"></a-input>
                            </a-form-item>
                        </a-col>

                        <a-col :span="6">
                            <a-form-item label="手机号码">
                                <a-input placeholder="请输入手机号码" v-model="queryParam.phone"></a-input>
                            </a-form-item>
                        </a-col>

                        <a-col :span="6">
                            <a-form-item label="状态">
                                <a-select v-model="queryParam.status" placeholder="请选择状态">
                                    <a-select-option value="">请选择状态</a-select-option>
                                    <a-select-option value="1">正常</a-select-option>
                                    <a-select-option value="2">解冻</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </template>

                    <a-col :span="6" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
                    </a-col>

                </a-row>
            </a-form>
        </div>
        <!--    update-begin author:kangxiaolin   date:20190921   for:系统发送通知 用户多选失败 #513  -->
        <a-table
                ref="table"
                rowKey="id"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect}"
                @change="handleTableChange"
        >
            <!--     update-end   author:kangxiaolin  date:20190921     for:系统发送通知 用户多选失败 #513 -->
        </a-table>
    </a-modal>
</template>

<script>
import { filterObj } from '@/utils/util';

import { getUserList } from '@/api/api'

export default {
  name: "SelectUserListModal",
  components: {
  },
  data () {
    return {
      title: "选择用户",
      queryParam: {},
      columns: [{
        title: '用户账号',
        align: "center",
        dataIndex: 'username',
        fixed: 'left',
        width: 200
      }, {
        title: '用户名称',
        align: "center",
        dataIndex: 'realname'
      }, {
        title: '性别',
        align: "center",
        dataIndex: 'sex',
        customRender: function (text) {
          if (text == 1) {
            return "男";
          } else if (text == 2) {
            return "女";
          } else {
            return text;
          }
        }
      }, {
        title: '手机号码',
        align: "center",
        dataIndex: 'phone'
      }, {
        title: '邮箱',
        align: "center",
        dataIndex: 'email'
      }, {
        title: '状态',
        align: "center",
        dataIndex: 'status',
        customRender: function (text) {
          if (text == 1) {
            return "正常";
          } else if (text == 2) {
            return "冻结";
          } else {
            return text;
          }
        }
      }],
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      selectedRowKeys: [],
      selectionRows: [],
      visible: false,
      toggleSearchStatus: false
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    add (selectUser, userIds) {
      this.visible = true;
      this.edit(selectUser, userIds);
    },
    edit(selectUser, userIds) {
      //控制台报错
      if (userIds && userIds.length > 0) {
        this.selectedRowKeys = userIds.split(',');
      } else {
        this.selectedRowKeys = []
      }
      if (!selectUser) {
        this.selectionRows = []
      } else {
        var that = this;
        that.selectionRows = [];
        selectUser.forEach(function(record, index) {
          console.log(record)
          that.selectionRows.push({ id: that.selectedRowKeys[index], realname: record })
        })
        // this.selectionRows = selectUser;
      }
    },
    loadData (arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      let params = this.getQueryParams();//查询条件
      getUserList(params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
      })
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter);
      param.field = this.getQueryField();
      //--update-begin----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379----
      // param.current = this.ipagination.current;
      // param.pageSize = this.ipagination.pageSize;
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      //--update-end----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379---
      return filterObj(param);
    },
    getQueryField() {
      let str = "id,";
      for (let a = 0; a < this.columns.length; a++) {
        str += "," + this.columns[a].dataIndex;
      }
      return str;
    },
    //--update-begin----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onSelect(record, selected) {
      if (selected == true) {
        this.selectionRows.push(record);
      } else {
        this.selectionRows.forEach(function(item, index, arr) {
          if (item.id == record.id) {
            arr.splice(index, 1);
          }
        })
      }
      //--update-end----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
    },

    searchReset() {
      let that = this;
      Object.keys(that.queryParam).forEach(function(key) {
        that.queryParam[key] = '';
      });
      that.loadData(1);
    },
    handleTableChange(pagination, filters, sorter) {
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = sorter.order == "ascend" ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    handleCancel () {
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.visible = false;
    },
    handleOk () {
      this.$emit("choseUser", this.selectionRows);
      this.handleCancel();
    },
    searchByquery() {
      this.loadData(1);
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus;
    }
  }
}
</script>
<style scoped>
    .ant-card-body .table-operator{
        margin-bottom: 18px;
    }

    .ant-table-tbody .ant-table-row td{
        padding-top:15px;
        padding-bottom:15px;
    }
    .anty-row-operator button{margin: 0 5px}
    .ant-btn-danger{background-color: #ffffff}

    .ant-modal-cust-warp{height: 100%}
    .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
    .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}

    .anty-img-wrap{height:25px;position: relative;}
    .anty-img-wrap > img{max-height:100%;}
</style>
